import React from 'react';
import { Table, Icon, Button, Popconfirm, message } from 'antd';
import { Link } from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import config from '../../assets/config';
export default class questionTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading: true,
            totalPage: 0,
            courses: []
        }
    }
    getList = () => {
        const { courses } = this.state;
        this.setState({ loading: true });
        fetch(config.base + "questionnaire/list", {
            method: 'GET',
            mode: config.cors,
            headers: { 'Content-Type': 'text/plain;charset=UTF-8' }
        }).then(res => { return res.json() })
        .then(rep => {
            const data = []
            if (rep.length === 0) { message.error("暂时没有数据") } else {
                for (let i = 0; i < rep.length; i++) {
                    const courseName = courses.filter((item) => item.id === rep[i].courseId)[0]
                    data.push({
                        key: rep[i].id,
                        title: rep[i].title,
                        description: rep[i].description,
                        type: rep[i].type === 1 ? '课前调查' : ' 课后评估',
                        dutyName: rep[i].dutyName,
                        courseId: courseName.name,
                        status: rep[i].status
                    })
                }

                this.setState({
                    tDate: data,
                    totalPage: rep.total,
                    loading: false
                })
            }
        })
        .catch((e) => {
            console.log(e.message);
            message.error("网络错误请稍后重试");
            this.setState({ loading: false })
        })
    }
    onDelete = (index) => {
        const tDate = [...this.state.tDate];
        this.setState({ loading: true });
        fetch(config.base + "questionnaire/delete", {
            method: 'POST',
            mode: config.cors,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: "id=" + tDate[index].key
        }).then(res => { return res.json() })
        .then(rep => {
            this.setState({ loading: false });
            if (rep.status == 200) {
                message.success(rep.message)
                tDate.splice(index, 1);
                this.setState({ tDate });
            } else {
                message.error(rep.message)
            }
        })
        .catch((e) => {
            console.log(e.message);
            message.error("网络错误请稍后重试");
            this.setState({ loading: false })
        })
    }
    componentDidMount() {
        fetch(config.base + "course/list?pageNum=1&&pageSize=100", {
            method: 'GET',
            mode: config.cors,
            headers: { 'Content-Type': 'text/plain;charset=UTF-8' }
        }).then(res => { return res.json() })
        .then(rep => {
            this.setState({ courses: rep.list });
            this.getList();
        })
        .catch((e) => {
            console.log(e.message);
            message.error("网络错误请稍后重试");
            this.setState({ loading: false })
        })
    }
    render() {
        const tDate = this.state.tDate;
        const columns = [{
            title: '问卷标题',
            width: '16%',
            dataIndex: 'title'
        }, {
            title: '问卷关联课程',
            width: '16%',
            dataIndex: 'courseId',
        }, {
            title: '问卷类型',
            width: '8%',
            dataIndex: 'type',
        }, {
            title: '问卷描述',
            width: '20%',
            dataIndex: 'description'
        }, {
            title: '操作',
            width: '40%',
            dataIndex: 'operate',
            render: (text, record, index) => {
                return (<div><Link to={{ pathname: "/questionUpdate", state: tDate[index] }}>
                    <Button type="primary" htmlType="button" >编辑</Button></Link>&nbsp;&nbsp;
                            &nbsp;&nbsp;
                            <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(index)}>
                        <Button type="danger" htmlType="button"  >删除</Button>
                    </Popconfirm>
                    &nbsp;&nbsp;
                            <Link to={{ pathname: "/questionResult", state: tDate[index].key }}>
                        <Button type="danger" htmlType="button"  >查看调查结果</Button>
                    </Link>
                    &nbsp;&nbsp;
                            <Link to={{ pathname: "/questionDetial", state: tDate[index].key }}>
                        <Button type="danger" htmlType="button"  >问题列表</Button>
                    </Link></div>)
            }
        }];
        const pagination = {
            total: this.state.totalPage,
            showSizeChanger: true,
            onShowSizeChange: (current, pageSize) => {
                this.getList(current, pageSize)
            },
            onChange: (current) => {
                this.getList(current)
            }
        }

        return (
            <div>
                <Button><Link to={{ pathname: "/questionAdd" }}>添加问卷调查</Link></Button>
                <br /><br />
                <Table columns={columns} dataSource={tDate} bordered pagination={false} loading={this.state.loading} className="animated fadeInUp " />
            </div>
        )
    }
}
